﻿@import '_variaveis.scss';
@import '_mixins.scss';

#sectionContato {
	@include float(400px, 96%, 0, 2%, true);

	#articleErro {
		@include float(auto, 100%, 0, 0);
		text-align: center;
		color: red;
	}

	#sectionFormulario {
		@include float(850px, 49%, 20px, 1%, true);
		font-size: 24px;

		#articleEntrarContato {
			@include float(auto, 100%, 0, 0);
			text-align: center;
		}

		#tblContato {
			margin-left: calc(50% - 200px);
		}

		.textbox {
			height: 36px;
			width: 400px;
			font-family: 'Segoe UI';
			font-size: 20px;
		}

		.button {
			height: 36px;
			width: 200px;
			font-family: 'Segoe UI';
			font-size: 20px;
			background: $background_header;
			color: $verde_bybike;
			border: none;
		}
	}

	#sectionLocalizacao {
		@include float(700px, 49%, 20px, 1%);
	}
}

@media only screen and (max-width: 1050px) and (min-width: 341px) {
	#sectionContato {
		height: 1800px !important;

		#sectionFormulario {
			min-height: 710px !important;
			width: 60% !important;
			margin-left: 20% !important;
		}

		#sectionLocalizacao {
			height: 300px !important;
			width: 80% !important;
			margin: 0 !important;
			margin-left: 10% !important;
		}
	}
}

@media only screen and (max-width: 340px) {
	#sectionContato {
		height: 1800px !important;

		#sectionFormulario {
			min-height: 710px !important;
			width: 60% !important;
			margin-left: 20% !important;

			#articleEntrarContato {
				font-size: 16px;
			}

			#tblContato {
				margin-left: 0;
			}

			.textbox {
				height: 30px;
				width: 200px;
				font-family: 'Segoe UI';
				font-size: 20px;
			}

			.button {
				height: 30px;
				width: 200px;
				font-family: 'Segoe UI';
				font-size: 20px;
				background: $background_header;
				color: $verde_bybike;
				border: none;
			}
		}

		#sectionLocalizacao {
			height: 300px !important;
			width: 80% !important;
			margin: 0 !important;
			margin-left: 10% !important;
		}
	}
}
